<!--
Copyright 2009, Google Inc.
All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are
met:

    * Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.
    * Neither the name of Google Inc. nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>
MRI Scans.
</title>
<style>
  body {
    background: black;
    color: white;
  }
</style>
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<!-- Include sample javascript library functions-->
<script type="text/javascript" src="o3djs/base.js"></script>

<!-- Our javascript code -->
<script type="text/javascript" id="o3dscript">
o3djs.require('o3djs.util');
o3djs.require('o3djs.math');
o3djs.require('o3djs.rendergraph');
o3djs.require('o3djs.primitives');
o3djs.require('o3djs.material');

// Constants
var SCANS = [
  { size: 320,
    sliceGap: 2,
    dir: [0, 1, 0],
    rotate: [0, 0, 0],
    camera: [0, 50, 0],
    cameraRange: [40, 0, 40],
    cameraSpeed: [1, 1, 1],
    paths: [
      'assets/back-horizontal-slice-01/instance_23.jpg',
      'assets/back-horizontal-slice-01/instance_24.jpg',
      'assets/back-horizontal-slice-01/instance_25.jpg',
      'assets/back-horizontal-slice-01/instance_26.jpg',
      'assets/back-horizontal-slice-01/instance_27.jpg',
      'assets/back-horizontal-slice-01/instance_28.jpg',
      'assets/back-horizontal-slice-01/instance_29.jpg',
      'assets/back-horizontal-slice-01/instance_30.jpg',
      'assets/back-horizontal-slice-01/instance_31.jpg',
      'assets/back-horizontal-slice-01/instance_32.jpg',
      'assets/back-horizontal-slice-01/instance_33.jpg',
      'assets/back-horizontal-slice-01/instance_34.jpg',
      'assets/back-horizontal-slice-01/instance_35.jpg',
      'assets/back-horizontal-slice-01/instance_36.jpg',
      'assets/back-horizontal-slice-01/instance_37.jpg',
      'assets/back-horizontal-slice-01/instance_38.jpg',
      'assets/back-horizontal-slice-01/instance_39.jpg',
      'assets/back-horizontal-slice-01/instance_40.jpg',
      'assets/back-horizontal-slice-01/instance_41.jpg'],
  },
  { size: 384,
    sliceGap: 1,
    dir: [1, 0, 0],
    rotate: [0, 0, 90],
    camera: [40, 0, 0],
    cameraRange: [0, 10, 10],
    cameraSpeed: [1, 1.6, 1],
    paths: [
    'assets/back-vertical-slice-01/instance_0.jpg',
    'assets/back-vertical-slice-01/instance_1.jpg',
    'assets/back-vertical-slice-01/instance_10.jpg',
    'assets/back-vertical-slice-01/instance_2.jpg',
    'assets/back-vertical-slice-01/instance_3.jpg',
    'assets/back-vertical-slice-01/instance_4.jpg',
    'assets/back-vertical-slice-01/instance_5.jpg',
    'assets/back-vertical-slice-01/instance_6.jpg',
    'assets/back-vertical-slice-01/instance_7.jpg',
    'assets/back-vertical-slice-01/instance_8.jpg',
    'assets/back-vertical-slice-01/instance_9.jpg'],
  },
  { size: 384,
    sliceGap: 1,
    dir: [1, 0, 0],
    rotate: [0, 0, 90],
    camera: [-40, 0, 0],
    cameraRange: [0, 10, 10],
    cameraSpeed: [1, 1.6, 1],
    paths: [
    'assets/back-vertical-slice-02/instance_12.jpg',
    'assets/back-vertical-slice-02/instance_13.jpg',
    'assets/back-vertical-slice-02/instance_14.jpg',
    'assets/back-vertical-slice-02/instance_15.jpg',
    'assets/back-vertical-slice-02/instance_16.jpg',
    'assets/back-vertical-slice-02/instance_17.jpg',
    'assets/back-vertical-slice-02/instance_18.jpg',
    'assets/back-vertical-slice-02/instance_19.jpg',
    'assets/back-vertical-slice-02/instance_20.jpg',
    'assets/back-vertical-slice-02/instance_21.jpg',
    'assets/back-vertical-slice-02/instance_22.jpg']
  }];

// Events
// init() once the page has finished loading.
// unload() when the page is unloaded.
window.onload = init;
window.onunload = unload;

// global variables
var g_o3dElement;
var g_o3d;
var g_math;
var g_client;
var g_viewInfo;
var g_pack;
var g_root;
var g_clock = 0;
var g_timeMult = 1;
var g_globalParams;
var g_o3dWidth;
var g_o3dHeight;
var g_o3dElement;
var g_scans = [];
var g_mode = 0;
var g_modeTimer = 0;


/**
 * Creates the client area.
 */
function init() {
  o3djs.util.makeClients(initStep2);
}

/**
 * Initializes O3D and creates one shape.
 * @param {Array} clientElements Array of o3d object elements.
 */
function initStep2(clientElements) {
  // Initializes global variables and libraries.
  g_o3dElement = clientElements[0];
  g_o3d = g_o3dElement.o3d;
  g_math = o3djs.math;
  g_client = g_o3dElement.client;

  // Creates a pack to manage our resources/assets
  g_pack = g_client.createPack();

  g_root = g_pack.createObject('Transform');

  g_viewInfo = o3djs.rendergraph.createBasicView(
      g_pack,
      g_root,
      g_client.renderGraphRoot,
      [0, 0, 0, 1]);

  // Set the blending to additive and turn off zBuffering so we don't
  // have to worry about sorting issues.
  var state = g_viewInfo.zOrderedState;
  state.getStateParam('ZWriteEnable').value = false;
  state.getStateParam('SourceBlendFunction').value =
      o3djs.base.o3d.State.BLENDFUNC_SOURCE_ALPHA;
  state.getStateParam('DestinationBlendFunction').value =
      o3djs.base.o3d.State.BLENDFUNC_ONE;
  state.getStateParam('CullMode').value =
      o3djs.base.o3d.State.CULL_NONE;

  // Setup the view and projection matrices.
  var eye = [15, 25, 50];
  var target = [0, 10, 0];
  var up = [0, 1, 0];
  g_viewInfo.drawContext.view = g_math.matrix4.lookAt(eye, target, up);

  g_viewInfo.drawContext.projection = g_math.matrix4.perspective(
    g_math.degToRad(45),               // field of view.
    g_client.width / g_client.height,  // aspect ratio
    0.1,                               // Near plane.
    5000);                             // Far plane.

  var material = o3djs.material.createMaterialFromFile(
      g_pack,
      'shaders/texture-colormult.shader',
      g_viewInfo.zOrderedDrawList);
  material.getParam('colorMult').value = [0, 0.6, 1, 0.15];

  // Create a plane
  var plane = o3djs.primitives.createPlane(g_pack, material, 30, 30, 1, 1);

  // Create a texture and transforms for each scan. We'll load the textures
  // async.
  for (var ss = 0; ss < SCANS.length; ++ss) {
    var scan = SCANS[ss];
    // Create a transform for this series.
    var root = g_pack.createObject('Transform');
    g_scans.push(root);
    root.parent = g_root;
    var numPlanes = scan.paths.length;
    for (var ii = 0; ii < numPlanes; ++ii) {
      // Create a transform for this individual slice.
      var transform = g_pack.createObject('Transform');
      transform.parent = root;
      transform.addShape(plane);
      var translate = o3djs.math.mulVectorScalar(
          scan.dir,
          (ii - numPlanes * 0.5) * scan.sliceGap)
      transform.translate(translate);
      transform.rotateZYX([
          o3djs.math.degToRad(scan.rotate[0]),
          o3djs.math.degToRad(scan.rotate[1]),
          o3djs.math.degToRad(scan.rotate[2])]);
      // Create a texture for this individual slice.
      var texture = g_pack.createTexture2D(
          scan.size, scan.size, g_o3d.Texture.XRGB8, 1, false);
      var sampler = g_pack.createObject('Sampler');
      // Create a ParamSampler to override the texture for this
      // slice.
      var param = transform.createParam('texSampler0', 'ParamSampler');
      param.value = sampler;
      sampler.texture = texture;
      // Start loading the bitmap for this slice.
      loadBitmap(texture, scan.paths[ii]);
    }
  }

  // Setup a render callback for per frame processing.

  g_client.setRenderCallback(onRender);

  window.g_finished = true;  // for selenium testing.
}

/**
 * Loads a bitmap, copying the bitmap into the given texture on
 * load.
 *
 * @param {!o3d.Texture2D} texture The texture to load the
 *     bitmap into.
 * @param {string} url The URL of the bitmap to load.
 */
function loadBitmap(texture, url) {
  o3djs.io.loadBitmaps(
      g_pack,
      o3djs.util.getAbsoluteURI(url),
      function(bitmaps, exception) {
        if (exception) {
          alert(exception)
        } else {
          var bitmap = bitmaps[0];
          texture.drawImage(
              bitmap,
              0,
              0,
              0,
              bitmap.width,
              bitmap.height,
              0,
              0,
              0,
              texture.width,
              texture.height);
          g_pack.removeObject(bitmap);
        }
      });
}

/**
 * Called every frame.
 * @param {!o3d.RenderEvent} renderEvent Rendering Information.
 */
function onRender(renderEvent) {
  var elapsedTime = renderEvent.elapsedTime;
  g_clock += elapsedTime * g_timeMult;

  g_modeTimer -= elapsedTime;
  while (g_modeTimer < 0) {
    g_modeTimer += 10;
    g_mode = (g_mode + 1) % g_scans.length;
    for (var ii = 0; ii < g_scans.length; ++ii) {
      g_scans[ii].visible = g_mode == ii;
    }
  }

  var scan = SCANS[g_mode];
  var eye = [];
  for (var ii = 0; ii < 3; ++ii) {
    var input = g_clock * scan.cameraSpeed[ii];
    var sc = ii == 0 ? Math.sin(input) : Math.cos(input);
    eye[ii] = scan.camera[ii] + sc *  scan.cameraRange[ii];
  }
  var target = [0, 0, 0];
  var up = [0, 1, 0];
  g_viewInfo.drawContext.view = g_math.matrix4.lookAt(eye, target, up);
};

/**
 * Remove any callbacks so they don't get called after the page has unloaded.
 */
function unload() {
  if (g_client) {
    g_client.cleanup();
  }
}
</script>
</head>
<body>
<h1>MRI Scans</h1>
<div id="o3d" style="width: 800px; height: 600px"></div>
</body>
</html>

